<template>
  <div class="classify app_content">
    <!-- 导航栏 titelText="信息公开"  -->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack"> </header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <lodding-card :isLodding="isLodding">
        <div class="warp_left" v-if="classifyList.length">
          <van-sidebar v-model="classifyActive">
            <van-sidebar-item v-for="(item, index) in classifyList" :key="index" :title="item.name"
                              @click="chioceClassify(item)" />
          </van-sidebar>
        </div>
        <div class="warp_right">
          <refresh-list v-model:freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"
                        :resetScroll="resetScroll">
            <div v-for="item in goodsList">
              <van-cell-group inset style="margin-bottom: 10px" @click="goItemInfo(item)">
                   <van-cell :title="item.title"
                        :label="'发布时间:' + item.releaseTime" />
              </van-cell-group>
            </div>
            <van-empty v-if="goodsList.length == 0" class="no_data" description="暂无数据" />
          </refresh-list>
        </div>
      </lodding-card>
    </div>
  </div>
</template>

<script setup name="Classify">
import {GET_POLICY_LIST} from "@/api/cooperativeOffice/individualQuery.js";
const router = useRouter();
let classifyId = ref(""); // 分类id
let classifyActive = ref(0); // 是否是选择中分类
let resetScroll = ref(0); // 滚动记录
let isLodding = ref(true); // 是否加载中
let classifyList = reactive([
  {
    name: "最新通知",
    type: 1
  },
  {
    name: "政策法规",
    type: 2
  },
  {
    name: "管理文件",
    type: 3
  },
  {
    name: "鉴定通报",
    type: 4
  },
  {
    name: "办事指南",
    type: 5
  },
  {
    name: "重点决策公示栏",
    type: 6
  }
]); // 分类列表
let goodsList = reactive([]); // 商品列表
let freshMap = reactive({
  refreshLoad: false, // 是否刷新
  listLoading: false, // 是否加载中
  listFinished: false, // 是否加载完成标识
});
const searchParams = reactive({
  type: 1
})
const classMap = reactive({
  refreshClass: "classify_refresh_box",
}); // 分类样式

//下拉刷新
const onRefresh = () => {
  freshMap.listFinished = false;
  freshMap.listLoading = true;
  getPagelist();
};

// 触底加载
const onLoad = () => {
  resetScroll.value = resetScroll.value + 1
  freshMap.listFinished = true;
  getPagelist(true);
};


// 点击分类
const chioceClassify = (item) => {
  classifyId = item?.id;
  resetScroll.value = 1;
  searchParams.type = item.type
  getPagelist();
};


//获取页面数据
const getPagelist = async (onLoad) => {
  // 每页显示的个数
  const pageSize = 10
  const res = await GET_POLICY_LIST({
    currPage: resetScroll.value,
    pageSize: pageSize,
    ...searchParams
  });
  if (res?.code == 20000) {
    goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
    freshMap.refreshLoad = false;
    freshMap.listLoading = false;
    freshMap.listFinished = res?.data && res?.data.length < pageSize ;
  }
  isLodding.value = false;
};
const goBack = () => {
  router.go(-1);
};
const goItemInfo = (item) => {
  router.push({
    name: "informationItemInfo",
    query: {
      policyId: item.policyId
    },
  });
};
onMounted(async () => {
  getPagelist()
});
</script>
<style lang="less" scoped>
.list-item {
  margin: 10px;
  background-color: #ffff;
  padding: 5px;
  font-size: 14px;
}
.time {
  font-size: 12px;
  color: #AAAA;
}
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .warp_body {
    display: flex;

    .warp_left {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .warp_right {
      flex: 1;
    }
  }
}
</style>
